<template>
    <div class="qdsq app-container">
        <el-form :inline="true">
            <el-form-item>
                <!-- <el-date-picker v-model="dateRange" size="small" style="width: 340px" value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" >
                </el-date-picker> -->
                <el-date-picker v-model="selTime" size="small" value-format="yyyy-MM-dd"
                    type="date" placeholder="请选择（日）" >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table stripe v-loading="loading" border :data="sslist"  >
            <el-table-column label="上报时间" align="left" prop="statHour" >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.chkTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="curLevel" label="水位(m)" align="left" ></el-table-column>
            <el-table-column prop="curFlow" label="流量(m³/s)" align="left" ></el-table-column>
          <el-table-column prop="cellVolt" label="电压(V)" align="left"></el-table-column>
          <!--            <el-table-column prop="signalSize" label="信号强度(dBm)" align="left"></el-table-column>-->
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
             :page-sizes="[5, 8, 10, 20]"
            @pagination="getlist"
            />

        <div v-show="ecshow" id="jcsjtcl_echars" v-loading="loading" ></div>

    </div>
</template>

<script>
import { getsslist, getsslistline  } from "@/api/measurement/watermonitor"
import echarts from 'echarts'


export default {
    name: "qdsqssjc",
    props:['czid','ymtype'],
    data() {
        return {
            //测站统计
            cztgitem:{
                znum: 0,
            },
            dateRange:[],
            selTime:'',
            // 遮罩层
            loading: true,
            sslist:[],
            // 列表高度
            tableHeight:350,
            ecshow:true,
            pageNum:1,
            pageSize:5,
            total:0,
        };
    },
    created() {
    },
    mounted () {
        var wd = document.body.clientWidth*0.5;
        document.getElementById("jcsjtcl_echars").style.width = wd+"px";
        this.czid = this.$props.czid
        this.getlsimg();
        this.getlist()
    },
    methods: {
        handleQuery(){
            this.getlsimg();
            this.getlist()
        },
        ckgd(){
            const z = this.ecshow;
            if(z){
                this.ecshow = false;
                this.tableHeight = 650;
            }else{
                this.ecshow = true;
                this.tableHeight = 350;
            }
        },
        getlist(){
            const _t = this;
            var pd = {
                statCd : this.$props.czid,
                chkTime:this.selTime,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }

            _t.loading = true;
                getsslist(pd).then(response => {
                _t.sslist = response.rows;
                _t.total = response.total;
                _t.loading = false;
            });


        },
        getlsimg() {
          const _t = this;
          _t.loading = true;
          var pd = {
            statCd: this.$props.czid,
            chkTime: this.selTime,
          }
          getsslistline(pd).then(res => {
            var dlist = res.data.reverse();
            var sjlist = [];
            var swlist = [];
            var lllist = [];
            var qs = [];
            if (dlist.length == 0) {
              _t.loadecharts(sjlist, swlist, lllist, qs);
              _t.loading = false;
              return;
            }
            for (let i = dlist.length - 1; i >= 0; i--) {
              sjlist.push(dlist[i].statHour.substr(11, 5));
              swlist.push(dlist[i].hourLevel);
              lllist.push(dlist[i].hourFlow);
              //qs.push(dlist[0].botHig);
            }
            _t.loadecharts(sjlist, swlist, lllist, qs);
            _t.loading = false;
          })
        },
        loadecharts(sjlist,swlist,lllist,qs) {
            // 基于准备好的dom，初始化echarts实例
            var echarts = require('echarts');
            var myChart = echarts.init(document.getElementById('jcsjtcl_echars'));
            // 绘制图表
            myChart.setOption({
                color:['#5DACD8','#FEC852','#51B1FF'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    top: '30%',
                    containLabel: true
                },
                // legend: {
                //     data: [
                //         // '渠深',
                //         '水位', '流量'],
                //     right: 10,
                //     icon: "line"
                // },
                title: {
                    text: '实时监测信息过程线',
                    left: 'left',
                    textStyle:{
                        //文字颜色
                        color:'#1699F3',
                        fontStyle:'normal',
                        fontWeight:'bold',
                        //字体系列
                        fontFamily:'sans-serif'
                    }

                },
                tooltip: {
                    trigger: 'axis',
                    formatter(params){
                        // let fParams = params[0];
                        let str = ''
                        let sParams = params[0];
                        if(sParams){
                            str += sParams.seriesName + ' : ' + sParams.value + ' m  '
                        }
                        let lParams = params[1];
                        if(lParams){
                            str += '<br>' + lParams.seriesName + ' : ' + lParams.value+'m³/s';

                        }
                        return   str
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: sjlist,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9e9e9e'
                        }
                    },
                },
                yAxis : [ {
                        splitLine:{show:false},
                        name: '(m)',
                        type: 'value',
                    },{
                        name: '(m³/s)',
                        type: 'value',
                        splitLine:{show:false},
                    }
                ],
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },{
                        start: 0,
                        end: 100
                    }
                ],
                series: [
                    // {
                    //     name: '渠深',
                    //     type: 'line',
                    //     symbol:"none", // 是否显示节点
                    //     lineStyle:{      //警戒线的样式  ，虚实  颜色
                    //         type:"dotted",   // type: 'solid'  //'dotted'虚线 'solid'实线
                    //         borderWidth:8,
                    //     },
                    //     data: qs,
                    // },
                    {
                        name: '水位',
                        type: 'line',
                        symbol:"none", // 是否显示节点
                        data: swlist,
                    },
                    {
                        name: '流量',
                        type: 'line',
                        symbol:"none", // 是否显示节点
                        data: lllist,
                        yAxisIndex: 1,
                        smooth: true,
                    }
                ]
            });
        },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">

    #jcsjtcl_echars{
        width: 300px;
        height: 300px;
        margin: 30px auto;
    }

    .tb_wz{
        width: 200px;
        margin: 30px auto;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #1699F3;
        text-align: center;
        cursor: pointer;
    }

    .qdsq{
        padding: 0;
        min-width: 700px;
    }

</style>
